<template>
	<view class="page">	
		<cu-custom  bgColor="bg-gradual-pink"  ><block slot="content">朋友圈</block>
			<block slot="place">
				<view class="action"  >
				</view>
			</block>
			<block slot="right" v-if="hasLogin">
				<view class="action"  >
					<!-- #ifndef MP-WEIXIN -->
					<text class="cuIcon-add" @click="publish()"></text>
					<!-- #endif -->
				</view>
			</block>
		
		</cu-custom>

		<view class="cu-card dynamic" :class="isCard?'no-card':''">
			<view class="cu-item shadow" v-for="(post,index) in posts" :key="index">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view @tap="toChange({to_id:post.to_id,type:'group'})" class="cu-avatar round lg" :style="{'background-image':'url('+post.from.avatar+')'}">
							<view class="cu-tag badge" v-if="getUnreadCount(post)!=0">
								<block>{{getUnreadCount(post)>99?'99+':getUnreadCount(post)}}</block>
							</view>
						</view>
						<view class="content ">
							<view>{{post.from.name}}</view>
							<view class="text-gray text-sm flex justify-between">
								{{post.sended_at}}
							</view>
						</view>
						<view class="action">
							<text class="cuIcon-commentfill margin-lr-xs" @tap="toChange({to_id:post.to_id,type:'group'})">
							</text>
							{{getMessageCount(post)}}
						</view>
					</view>
				</view>
				<block v-if="post.data.extra.post_messages" v-for="(message,index1) in post.data.extra.post_messages" :key="index1">
					<view class="text-content" v-if="message.message_type=='text'">
						{{message.data.content}}
					</view>
					<view class="flex justify-center padding-xs" v-else-if="message.message_type=='video'">
						<video style="width:280px"  id="myVideo" :src="message.data.content"
						                    controls></video>
					</view>
					<view class="flex justify-center padding-xs" v-else-if="message.message_type=='image'">
						<view v-if="message.data.extra&&message.data.extra.images"  class="grid flex-sub padding-lr" :class="message.data.extra.images.length>=3?'col-3 grid-square':('grid-square '+'col-'+message.data.extra.images.length)" style="width: calc(100vw - 260rpx);">
							<view  @tap="imViewImage" class="bg-img" :class="" 
							 v-for="(item,index) in message.data.extra.images" :key="index" :src="$tool.chat_img_url(item)" :data-url="$tool.chat_img_url(item)" :style="{'background-image':('url('+item+')')}">
							</view>
						</view>
					</view>
				</block>
				

				<view class="text-gray text-sm text-right padding">
					<chat-vote :message="post"></chat-vote>
				</view>
		
			</view>
			<template v-if="posts.length==0">
				<view v-if="hasLogin" class="flex justify-center align-center" style="height: 80vh;">
						<view class="">
							<view class="text-green" @tap="$emit('friendCircleDisplay')">
								发个朋友圈可好？
							</view>
						</view>
					
				</view>
				<view v-else class="flex justify-center align-center" style="height: 80vh;">
						<view class="">
							<view class="text-green" @tap="toEmit('modal_name','my')">
								先去登录吧...
							</view>
						</view>
					
				</view>
				
			</template>
			
		</view>
		
	</view>
</template>


<script>
	import app from '@/mixins/app.js'
	import im from '@/mixins/im.js'
	export default {
		data() {
			return {
				isCard: false,
				refresh:false
				// posts:[]
			}
		},
		mixins:[app,im],
		computed:{
			post(){
				return this.$store.state.post
			},
			posts(){
				return this.post.posts
			},
			posts_latest_messages(){
				return this.post.posts_latest_messages
			},
			current_oldest_unique_slug(){//最底部一条
				if(this.posts&&this.posts.length){
					return this.posts[this.posts.length-1].unique_slug;
				}
				return ''
			},
			current_latest_unique_slug(){//当前聊天记录最新
				if(this.posts&&this.posts.length){
					return this.posts[0].unique_slug;
				}
				return ''
			},
			current_images(){
				
				var posts = this.posts
				var a = []
				posts.map((post)=>{
					post.data.extra.post_messages.map(current_message=>{
						if(current_message.message_type=='image'){
							if(current_message.data.content){
								a.push(current_message.data.content)
							}else if (current_message.data.extra.images&&current_message.data.extra.images.length>0){
								current_message.data.extra.images.map((img)=>{
									a.push(img)
								})
							}
						}
						return current_message
					})
				})
				
				return a
				
			}
		},

		methods: {
			toChange(item){
				this.$store.dispatch('post/joinGroup',{group_id:item.to_id}).then((res)=>{
					if(res.data.code==0){
						this.toChat(item);
					}
				})
			},
			getUnreadCount(post){
				var messages = this.im.messages
				var length = messages.length
				for(let i = 0; i<length;i++){
					if(post.to_id==messages[i].group_id){
						return messages[i].unread_count
					}
				}
				return 0
			},
			getMessageCount(post){
				var latest_messages = this.latest_messages;
				
				for(let i=0;i<latest_messages.length;i++){//优先latest_messages
					if(latest_messages[i].group_id==post.to_id){
						return latest_messages[i].message_count
					}
				}
				
				var  posts_latest_messages = this.posts_latest_messages//只是过渡
				for(let i=0;i<posts_latest_messages.length;i++){//优先latest_messages
					if(posts_latest_messages[i].group_id==post.to_id){
						return posts_latest_messages[i].message_count
					}
				}
				
				return 0;
				
			},
			publish(){
				console.log(1111,'friendCircleDisplay')
				this.$emit('friendCircleDisplay')
			},
			IsCard(e) {
				this.isCard = e.detail.value
			},
			imViewImage(e) {
				uni.previewImage({
					urls: this.current_images,
					current: e.currentTarget.dataset.url
				});
			},
			async get_posts(type){
				var unique_slug = ''
				if(type=='pull'){
					unique_slug = this.current_latest_unique_slug
				}else if (type=='up'){
					unique_slug = this.current_oldest_unique_slug
				}
				console.log('pull slug',this.current_latest_unique_slug)
				await this.$store.dispatch('post/index',{unique_slug:unique_slug,type:type}).then((res)=>{
					
					uni.stopPullDownRefresh();
					if(res.data.code==0){
						
						if(res.data.data.lists.length>0){
							console.log(23232132,'updateCurrentMessages')
							this.updatePosts(res.data.data.lists,type)
							this.updatePostsLatestMessages(res.data.data.posts_latest_messages,type)
						}else{
							uni.showToast({
								icon:'none',
								title:'没有更多数据了'
							})
						}
					}
				})
			},
			updatePosts(posts,type){
				if(type=='pull'){
					 posts = posts.concat(this.posts)
					 this.$store.dispatch('post/posts',posts)
				}else if(type=='up'){
					posts = this.posts.concat(posts)
					this.$store.dispatch('post/posts',posts)
				}
				
			},	
			updatePostsLatestMessages(posts_latest_messages,type){
				if(type=='pull'){
					 posts_latest_messages = posts_latest_messages.concat(this.posts_latest_messages)
					 this.$store.dispatch('post/posts_latest_messages',posts_latest_messages)
				}else if(type=='up'){
					posts_latest_messages = this.posts_latest_messages.concat(posts_latest_messages)
					this.$store.dispatch('post/posts_latest_messages',posts_latest_messages)
				}
				
			},
			pullDownRefresh(){
				console.log('pull friend-circle')
				
				this.get_posts('pull')

			},
			upDownRefresh(){
				console.log('up friend-circle')
				if(this.refresh){
					console.log('刷新的太快了')
					return 
				}
				this.get_posts('up')
				this.refresh = true
				setTimeout(()=>{
					this.refresh = false
				},3000)
			},
		},
		destroyed() {
			uni.$off('friend-circle-page-pull-down-refresh',this.pullDownRefresh)
			uni.$off('friend-circle-page-up-down-refresh',this.upDownRefresh)
		},
		mounted() {
			if(!this.hasLogin){
				console.log('您还没有登录my-page')
			}
			if(this.posts&&this.posts.length){//请求过就不请求了
				
			}else{
				this.get_posts('pull')
			}
			
			uni.$on('friend-circle-page-pull-down-refresh',this.pullDownRefresh)
			uni.$on('friend-circle-page-up-down-refresh',this.upDownRefresh)
			
		}

	}
</script>


<style>
	.page{
		padding-bottom: 200rpx;
	}
</style>
